<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>贪吃蛇</title>
    <link rel="stylesheet" href="../reset.css">
    <style>
        * {
            box-sizing: border-box;
        }

        #main {
            height: 420px;
            width: 360px;
            border: 10px #000 solid;
            background-color: #b7d4a8;
            border-radius: 20px;
            margin: 50px auto;
        }

        #stage {
            width: 304px;
            height: 304px;
            border: 2px #000 solid;
            margin: 20px auto;
            position: relative;
        }

        #snake>div {
            width: 10px;
            height: 10px;
            background-color: #000;
            position: absolute;
        }

        #food {
            width: 10px;
            height: 10px;
            position: absolute;
            top: 100px;
            left: 100px;
            display: flex;
            flex-flow: row wrap;
        }

        #food>div {
            width: 5px;
            height: 5px;
            background-color: #000;
            transform: rotate(45deg);
        }

        #info {
            width: 304px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            font: bold 20px courier;
        }
    </style>
    <script>
        document.addEventListener("DOMContentLoaded", () => {

            // 获取蛇
            const snake = document.getElementById("snake")

            // 获取蛇的各个部分
            const snakes = snake.getElementsByTagName("div")

            // 获取蛇头
            const snakesHead = snakes[0]

            /* 
                绑定按键事件
                    keydown:键盘按下触发
                    keyup：键盘松开触发
                    键盘事件只能绑定给可以获取焦点的元素或者是document
            */
            document.addEventListener("keydown", (event) => {
                /* 
                通过事件对象获取用户按的是什么按键
                    有两种方式：
                        1.传统的方式
                            event.keyCode   返回的是键盘编码（有时候有些用户的键盘编码有特殊性，不能普遍适用）
                        2.
                            event.key       返回的是按键的名字

                    当我们按着某个键盘的按键不松手时，键盘的按下事件会持续触发
                        但是第一次和第二次之间触发的间隔会比较长。（键盘防止误操作）
                    
                        这样导致练习中的蛇
                        要解决的两个点
                            1.不能流畅移动，
                            2.蛇不能停。
                        
                        
                        

                */
                switch (event.key) {
                    case "ArrowUp":
                        // 向上移动蛇
                    snakesHead.style.top = snakesHead.offsetTop - 10 + "px"
                        break;

                    case "ArrowDown":
                        // 向下移动蛇
                    snakesHead.style.top = snakesHead.offsetTop + 10 + "px"
                        break;

                    case "ArrowLeft":
                        // 向左移动蛇
                    snakesHead.style.left = snakesHead.offsetLeft - 10 + "px"
                        break;

                    case "ArrowRight":
                        // 向右移动蛇
                    snakesHead.style.left = snakesHead.offsetLeft + 10 + "px"
                        break;
                }
            })

        })

    </script>
</head>

<body>
    <div id="main">
        <div id="stage">
            <div id="snake">
                <div></div>
            </div>
            <div id="food">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
        <div id="info">
            <div>
                SCORE: <span id="score">100</span>
            </div>
            <div>
                LEVEl: <span id="level">1</span>
            </div>
        </div>
    </div>
</body>

</html>